<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <button @click="num++">父：修改num</button>
    <hr/>
<!--    <one :num="num" :change-num="changeNum"></one>-->
<!--    <one :num="num" :change-num="v=>num+=v"></one>-->
<!--    <one :num="num" :change-num="function(v){num+=v;}"></one>-->
<!--    <one :num="num" @changeNum="v=>num+=v"></one>-->
<!--    <one :num="num" @update:num="v=>num+=v"></one>-->
    <one :num.sync="num"></one>
</div>
</body>
<script>
    new Vue({
        el: "#root",
        data:{
            num:1
        },
        methods:{
            changeNum(n=1){
                this.num+=n;
            }
        },
        components: {
            one: {
                props:["num","changeNum"],
                template: `
                    <div>

                        <h3>one组件：{{num}}</h3>
                        <button @click="$emit('update:num',num+1)">修改num</button>
<!--                        <button @click="changeNum(1)">修改num</button>-->
                    </div>
                `
            }
        }
    })
</script>
</html>